<template>
  <div>
    <el-dialog :visible.sync="opens" width="1200px" append-to-body :before-close="close" class="el_box">
      <el-divider content-position="center">{{ titles }}</el-divider>
      <div class="top_title">
        <div class="top_main">
          <img src="@/assets/kw/zkw.png" alt="">
          <div>
            <div>{{ total_config_counts }}</div>
            <p>总库位</p>
          </div>
        </div>
        <div class="top_main">
          <img src="@/assets/kw/cckw.png" alt="">
          <div>
            <div>{{ usage_1_counts }}</div>
            <p>存储库位</p>
          </div>
        </div>
        <div :class="{'top_main': true, 'flex-two': total_counts > 100000}">
          <img src="@/assets/kw/ycsl.png" alt="">
          <div>
            <div v-if="total_counts < 1000000">{{ total_counts }}</div>
            <div v-else style="font-size: 28px;">{{ total_counts }}</div>
            <p>已存数量</p>
          </div>
        </div>
        <div class="top_main">
          <img src="@/assets/kw/tps.png" alt="">
          <div>
            <div>{{ total_layup_nums }}</div>
            <p>托盘数量</p>
          </div>
        </div>
        <div class="top_main">
          <img src="@/assets/kw/kwl.png" alt="">
          <div>
            <div>{{ vacancy_rate }}</div>
            <p>使用率</p>
          </div>
        </div>
      </div>
      <div class="box">
        <div
          v-for="(item, index) in seat"
          :key="index"
          :class="item.stock ? 'item_f' : 'item_k'"
          @click="change_zt(seat[index])"
          @mouseover="showDetails(item)"
          @mouseleave="hideDetails"
        >
          <img v-if="item.usage == '1' || item.usage == null" src="@/assets/kw/cc.png" alt="" class="kw_img">
          <img v-if="item.usage == '2'" src="@/assets/kw/gl.png" alt="" class="kw_img">
          <img v-if="item.usage == '3'" src="@/assets/kw/zf.png" alt="" class="kw_img">
          <div class="seat_num">
            <img src="@/assets/kw/seat.png" alt="">
            <span>{{ item.name }}</span>
          </div>
          <div class="seat_num">
            <img src="@/assets/kw/num.png" alt="">
            <span>{{ item.stock }}</span>
          </div>
          <div v-show="showDetailsId === item.id" class="shelf-details">
            货架ID: {{ item.id }}
            <div class="shelf">
              <div v-for="tray in levels[0].trays" :key="tray.id" class="tray">
                <div class="tray-content">
                  <div v-for="box in tray.boxes" :key="box.id" class="box1" />
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
      <el-dialog width="30%" title="选择仓库状态" :visible.sync="innerVisible" append-to-body center>
        <el-form label-width="80px" :model="form">
          <el-form-item label="名称">
            <span>{{ form.name }}</span>
          </el-form-item>
          <el-form-item label="数据状态" prop="isstatus">
            <el-switch v-model="form.isstatus" active-text="启用" inactive-text="禁用" :active-value="1" :inactive-value="0" />
          </el-form-item>
          <el-form-item label="库位状态">
            <el-radio v-model="radio" label="1">普通库位</el-radio>
            <el-radio v-model="radio" label="2">隔离库位</el-radio>
            <el-radio v-model="radio" label="3">暂放库位</el-radio>
          </el-form-item>

          <el-form-item label="最大承重">
            <el-input v-model="form.max_load_weight" />
          </el-form-item>
          <el-form-item label="最大长度">
            <el-input v-model="form.max_load_length" />
          </el-form-item>
          <el-form-item label="最大宽度">
            <el-input v-model="form.max_load_width" />
          </el-form-item>
          <el-form-item label="最大高度">
            <el-input v-model="form.max_load_height" />
          </el-form-item>

          <el-row style="top: 30px;margin-bottom: 30px;text-align:center;">
            <el-col :span="24">
              <el-button type="primary" size="medium" @click="submit()">提交</el-button>
              <el-button size="medium" @click="innerVisible = false">取消</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import { locationEdit } from '@/api/stock'
export default {
  name: 'Seat',
  props: ['opens', 'seat', 'titles', 'total_config_counts', 'total_counts', 'total_layup_nums', 'usage_1_counts', 'vacancy_rate'],
  data() {
    return {
      innerVisible: false,
      form: {},
      formLabelWidth: '120px',
      radio: '1',
      showDetailsId: null,
      levels: [
        { id: 1, trays: [
          { id: 1, boxes: [1, 2, 3, 4, 5, 6, 7, 8] },
          { id: 2, boxes: [1, 2, 3] },
          { id: 3, boxes: [1, 2, 3, 4] },
          { id: 4, boxes: [1, 2] },
          { id: 5, boxes: [] }
        ] },
        { id: 2, trays: [
          { id: 1, boxes: [1, 2, 3, 4] },
          { id: 2, boxes: [1, 2, 3] },
          { id: 3, boxes: [1, 2] },
          { id: 4, boxes: [] },
          { id: 5, boxes: [] }
        ] },
        { id: 3, trays: [
          { id: 1, boxes: [1, 2, 3] },
          { id: 2, boxes: [1, 2] },
          { id: 3, boxes: [] },
          { id: 4, boxes: [] },
          { id: 5, boxes: [] }
        ] },
        { id: 4, trays: [
          { id: 1, boxes: [1, 2] },
          { id: 2, boxes: [] },
          { id: 3, boxes: [] },
          { id: 4, boxes: [] },
          { id: 5, boxes: [] }
        ] },
        { id: 5, trays: [
          { id: 1, boxes: [] },
          { id: 2, boxes: [] },
          { id: 3, boxes: [] },
          { id: 4, boxes: [] },
          { id: 5, boxes: [] }
        ] }
      ]
    }
  },
  watch: {
    // seat() {
    //   console.log(this.seat)
    // },
    form() {
      if (this.form.usage == null) {
        this.form.usage = '1'
        this.radio = '1'
      } else {
        this.radio = String(this.form.usage)
      }
    }
  },
  methods: {
    showDetails(item) {
      // console.log(item.id)
      // this.showDetailsId = item.id
    },
    hideDetails() {
      // this.showDetailsId = null
    },
    submit() {
      this.form.usage = this.radio
      console.log(this.form)
      if (this.form.stock) {
        this.$message.error('库位有库存，不能修改状态！')
        return
      }
      locationEdit(this.form).then(res => {
        if (res.code === 10000) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.innerVisible = false
        }
      })
    },
    close_inner() {
      this.innerVisible = false
    },
    change_zt(list) {
      this.form = list
      if (this.form.usage == null) {
        this.form.usage = 1
      }
      // console.log(this.form)
      this.innerVisible = true
    },
    close() {
      this.$emit('update:opens', false)
    }
  }
}
</script>

<style scoped>
.el_box {
  /* min-height: 500px;
  max-height: 1000px; */
}

.box {
  width: 100%;
  /* min-height: 500px;
  max-height: 1000px; */
  margin-left: 15px;
  display: flex;
  flex-wrap: wrap;
  /*border: 1px solid black;*/
}

.item_k {
  width: 119px;
  height: 58px;
  margin: 5px;
  background-color: #F5F7FA;
  /* background-color: #D2FEBE; */
  border-radius: 4px;
  position: relative;
  border-radius: 4px;
  margin-right: 9px;
}

.item_f {
  width: 119px;
  height: 58px;
  margin: 5px;
  background-color: #F5F7FA;
  /* background-color: #FFE7D0; */
  border-radius: 4px;
  position: relative;
  border-radius: 4px;
  margin-right: 9px;
}

.seat_num {
  display: flex;
  align-items: center;
  margin-top: 12px;
}

.seat_num img {
  width: 10.5px;
  height: 10.7px;
  margin-left: 8px;
}

.seat_num span {
  color: rgba(51, 51, 51, 1);
  font-size: 14px;
  letter-spacing: 0px;
  line-height: 0px;
  margin-left: 4px;
}

.kw_img {
  width: 38px;
  height: 35px;
  position: absolute;
  right: 0;
  top: 0;
}

.top_title {
  width: 97.5%;
  height: 120px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0 15px 40.5px 15px;
}

.top_title div {
  height: 100%;
  background: rgba(245, 247, 250, 1);
  flex: 1;
  display: flex;
  align-items: center;
  border-radius: 8px;
}

.top_main{
  flex: 1 1 auto;
}

.top_main:nth-child(n + 2):nth-child(-n + 5) {
  margin-left: 15px;
}

.top_title div img {
  width: 60px;
  height: 60px;
  margin-left: 10%;
  margin-right: 6.4%;
}

.top_title div div {
  width: 45%;
  height: 55%;
  display: block;
  position: relative;
}

.top_title div div div {
  position: absolute;
  top: 0;
  left: 0;
  color: rgba(41, 44, 56, 1);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0px;
  line-height: 36px;
  width: 100%;
}

.top_title div div p {
  position: absolute;
  bottom: 0;
  left: 0;
  color: rgba(116, 120, 140, 1);
  font-size: 16px;
  letter-spacing: 0px;
  line-height: 24px;
  margin: 0;
}
.flex-two {
  flex: 1.3 !important;
}
.shelf-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.shelf {
  display: flex;
}
.shelf-level {
  text-align: center;
  margin: 10px;
  cursor: pointer;
  width: 120px; /* 货架层级的宽度 */
}
.shelf-details {
  margin-top: 10px;
}
.tray-container {
  display: flex;
  justify-content: center;
}
.tray {
  /*width: 60px; !* 托盘的宽度 *!*/
  /*height: 60px; !* 托盘的高度 *!*/
  background-color: #f0f0f0;
  margin: 5px;
  position: relative;
}
.tray-content {
  display: flex;
  flex-wrap: wrap;
  /*flex-direction: column;*/
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.box1 {
  width: 12px; /* 箱子的大小 */
  height: 12px; /* 箱子的大小 */
  background-color: #4caf50;
  border: 1px solid #333;
  margin: 1px;
}
</style>
